<template>
  <a-table :columns="columns" :data-source="data" class="components-table-demo-nested">
    <template #operation="">
      <a>Publish</a>
    </template>
    <template #expandedRowRender="">
      <a-table :columns="innerColumns" :data-source="innerData" :pagination="false">
        <template #status="">
          <span><a-badge status="success"/>Finished </span>
        </template>
        <template #operation="">
          <span class="table-operation">

            <a-dropdown>
              <template #overlay>

              </template>
              <a> More <down-outlined/> </a>
            </a-dropdown>
          </span>
        </template>
      </a-table>
    </template>
  </a-table>
</template>

<script>
import {DownOutlined} from '@ant-design/icons-vue';

const columns = [
  {title: 'Name', dataIndex: 'name', key: 'name'},
  {title: 'Version', dataIndex: 'version', key: 'version'},
  {title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum'},
  {title: 'Creator', dataIndex: 'creator', key: 'creator'},
  {title: 'Date', dataIndex: 'createdAt', key: 'createdAt'},
  {title: 'Action', key: 'operation', slots: {customRender: 'operation'}},
];

const data = [];
for (let i = 0; i < 3; ++i) {
  data.push({
    key: i,
    name: 'Screem',
    platform: 'iOS',
    version: '10.3.4.5654',
    upgradeNum: 500,
    creator: 'Jack',
    createdAt: '2014-12-24 23:12:00',
  });
}

const innerColumns = [
  {title: 'Date', dataIndex: 'date', key: 'date'},
  {title: 'Name', dataIndex: 'name', key: 'name'},
  {title: 'Status', key: 'state', slots: {customRender: 'status'}},
  {title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum'},
  {
    title: 'Action',
    dataIndex: 'operation',
    key: 'operation',
    slots: {customRender: 'operation'},
  },
];

const innerData = [];
for (let i = 0; i < 3; ++i) {
  innerData.push({
    key: i,
    date: '2014-12-24 23:12:00',
    name: 'This is production name',
    upgradeNum: 'Upgraded: 56',
  });
}

export default {
  name: "fixedtable",
  props: {
    tabletitle1: {
      type: String,
      default: '姓名'
    },
    tabletitle2: {
      type: String,
      default: '年龄'
    }, tabletitle3: {
      type: String,
      default: '病床号'
    }, tabletitle4: {
      type: String,
      default: '病例信息'
    },
  },
  components: {
    DownOutlined,
  },
  data() {
    return {

      data,
      columns,
      innerColumns,
      innerData,


    };
  },
}
</script>

<style scoped>

</style>